<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>08_DOM事件监听</title>
</head>
<body>
    <button onclick="alert('点击了！')">按钮1</button>
    <button id="btn">按钮2</button>
    <h4>震惊：居然发生了这种事...</h4>
    <div>
        <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A ab amet animi blanditiis dignissimos eaque
            impedit ipsum maiores nesciunt nobis officiis quae, reiciendis suscipit temporibus ullam veniam vitae
            voluptatibus. Eos.
        </div>
        <div>Blanditiis ducimus facilis itaque laudantium officiis tempore voluptatum? Ab asperiores assumenda delectus
            dolor dolorum enim ex, impedit incidunt necessitatibus nostrum perspiciatis porro quas quasi quo recusandae
            tempore tenetur vel veniam.
        </div>
        <div>Accusamus aperiam, distinctio ducimus esse explicabo ipsum maxime placeat quas reprehenderit temporibus
            tenetur ut velit. Amet consequuntur deserunt, dolores ex ipsum magnam, maiores nemo nihil praesentium
            quibusdam, rerum sequi voluptatibus.
        </div>
        <div>Animi, aperiam aspernatur autem consectetur culpa cum deserunt dignissimos distinctio doloremque esse eum
            harum id, illum incidunt ipsum labore, numquam perspiciatis placeat praesentium quia quidem quis rerum
            sapiente sequi similique?
        </div>
        <div>Accusamus ad alias animi dicta dolore, eaque eligendi est et eveniet expedita fuga fugiat harum libero
            magni maxime minima nobis porro quam quibusdam quidem quis quo sapiente sint, temporibus voluptates.
        </div>
        <div>A animi aut autem consequatur consequuntur deserunt, doloremque doloribus fugiat inventore ipsum modi
            nesciunt non omnis praesentium quod, repellat vel voluptates! Ab cupiditate debitis, esse facilis laborum
            porro quasi vero!
        </div>
        <div>Alias aperiam assumenda cum cupiditate iusto labore nemo omnis placeat, porro praesentium quas quibusdam
            similique veniam! Ad asperiores cum placeat suscipit. Accusamus excepturi impedit provident quae
            repudiandae? Alias, in, natus?
        </div>
        <div>Amet assumenda consequatur cumque dicta doloremque explicabo ipsa itaque magnam necessitatibus non numquam
            optio quae qui repellat, totam, voluptatem, voluptatum. Adipisci aliquam deserunt doloribus ex magnam nam
            numquam odit veritatis!
        </div>
        <div>Accusantium, ad beatae consectetur cupiditate deserunt esse eveniet explicabo fugiat iste iure iusto labore
            laudantium magnam mollitia nihil numquam placeat praesentium quos reiciendis repellendus reprehenderit
            tempore, tenetur totam! Aut, enim?
        </div>
        <div>Dolor earum itaque maiores reprehenderit saepe similique sint ullam? Distinctio mollitia nemo nobis odit
            qui quisquam quos rerum saepe voluptatem. Atque dolores ex id in neque nulla quibusdam vero voluptas.
        </div>
        <div>Atque blanditiis, cumque eveniet nemo non, omnis optio provident qui quia quibusdam sequi voluptates. A ea
            eos fugit hic laudantium molestias qui rem sunt suscipit? Ab aut eligendi esse odit!
        </div>
        <div>Aspernatur aut culpa deleniti deserunt, eum facere facilis harum laboriosam maiores maxime nisi optio
            pariatur tempora totam veritatis! Blanditiis delectus eligendi fugiat ipsam itaque laudantium nisi possimus
            quos rem soluta.
        </div>
        <div>Accusamus alias architecto, asperiores assumenda beatae consectetur delectus doloribus ex facere illo illum
            incidunt iusto perferendis perspiciatis, placeat quas qui ratione recusandae, sunt tenetur ut vero vitae
            voluptates. Animi, doloremque!
        </div>
        <div>Ad aspernatur dolores earum eos est fugiat illo iste labore magnam molestias nam nesciunt, porro,
            reiciendis, sequi voluptatum. Autem dicta expedita iusto, laborum nam quo rem saepe sequi totam ullam.
        </div>
        <div>Cupiditate exercitationem expedita nobis! Amet aperiam at atque, culpa deleniti dicta dolore, eaque
            eligendi esse et eum ex, facilis id ipsum iusto magni maiores necessitatibus non omnis perferendis quo
            ratione!
        </div>
        <div>Architecto autem beatae commodi, corporis dolore excepturi inventore ipsa magni, neque omnis qui, rem
            reprehenderit sunt. Ea et explicabo, magni molestias quae quo velit? Amet facilis id minus nisi officia?
        </div>
        <div>Ad alias aliquid facere quisquam sed suscipit tempora voluptatem. Ad, quibusdam reprehenderit? Accusamus,
            alias aliquid aperiam delectus molestiae nesciunt possimus praesentium quibusdam quidem quisquam,
            recusandae, reprehenderit repudiandae voluptates. Libero, tempora!
        </div>
        <div>Architecto at dolor doloremque doloribus ea earum et explicabo facere hic labore libero, magnam, modi
            officia pariatur quaerat quasi repudiandae sit totam voluptas voluptatem? Aut consectetur ea excepturi
            provident tempore?
        </div>
        <div>Accusamus ad eveniet odio perspiciatis tenetur totam veniam voluptas! Blanditiis dolores facilis magnam
            officiis rem rerum vitae. Accusantium aperiam, consequatur expedita ipsum, laboriosam, nobis odit quo
            sapiente sunt tenetur voluptatibus!
        </div>
        <div>Autem doloribus eligendi est natus perspiciatis? Aliquid architecto consequatur dolores doloribus eius
            enim, et facere in ipsam labore necessitatibus numquam odit quasi, rem repellendus saepe sapiente sequi
            soluta sunt tenetur?
        </div>
        <div>Doloremque ipsam non odio perferendis quam quidem sed, voluptas. Adipisci dolor dolores error est
            inventore, magni minima minus nesciunt numquam quas, recusandae rem reprehenderit repudiandae temporibus
            vero voluptatem voluptatum. Eveniet.
        </div>
        <div>Aut consequuntur, eligendi explicabo ipsum voluptas voluptates. Est eveniet facere fugiat hic impedit ipsam
            laborum maiores modi nobis, omnis perspiciatis quidem quis repellat saepe sequi tempore temporibus voluptas
            voluptate voluptatibus.
        </div>
        <div>Deserunt, laborum odio! Asperiores atque blanditiis consectetur doloribus dolorum exercitationem magnam
            modi nam nostrum porro quas, reiciendis totam ut. Commodi debitis dolorem error exercitationem facilis
            fugiat minima non porro reprehenderit?
        </div>
        <div>Accusamus adipisci esse eum excepturi minima, molestiae mollitia nulla optio repellat voluptatem! Ab
            doloribus et ex maiores minus necessitatibus officia quibusdam reiciendis, repellat rerum. Iusto molestiae
            porro quia quidem sequi.
        </div>
        <div>Aspernatur, et non! Ab accusamus commodi consequuntur cumque debitis dolorem eveniet expedita hic id, ipsa
            itaque iure labore maxime molestias possimus quas repellat reprehenderit sed suscipit tempora tempore veniam
            vitae!
        </div>
        <div>Amet aspernatur, atque beatae consequuntur cum, deleniti doloremque doloribus ducimus enim, esse facere
            facilis in necessitatibus nemo nihil officia placeat provident quasi quis quod recusandae sapiente tempore
            veniam voluptate voluptatum?
        </div>
        <div>Amet assumenda atque dolor fugiat harum illo ipsum iusto molestiae nostrum odio qui quia, recusandae rem
            sint ut. Accusantium aspernatur consequatur eius impedit nam natus optio recusandae rem sed voluptas?
        </div>
        <div>Aliquam assumenda atque commodi cum dicta eius facere hic, impedit ipsam magnam maxime minima minus modi
            molestiae necessitatibus odio placeat possimus provident sequi sint, sit tempora tempore voluptatibus. Eum,
            reprehenderit.
        </div>
        <div>Eos, quisquam velit. Accusamus asperiores atque commodi corporis debitis ducimus, nihil provident
            repellendus. Architecto consequatur esse et eveniet hic id maxime minus nihil nobis possimus quas soluta
            temporibus, totam vitae.
        </div>
        <div>Ad adipisci beatae cum eaque ex minima nemo omnis praesentium quas rem saepe sint ut, vel! Accusantium,
            assumenda consequuntur distinctio eius, harum inventore maxime modi nemo, optio pariatur quisquam vero.
        </div>
        <div>Aliquam aliquid asperiores aut deleniti, eius fuga fugit inventore laudantium maiores minus obcaecati odit
            omnis quam recusandae rerum saepe vel, voluptas? Accusantium assumenda beatae dolorum laborum nostrum
            pariatur provident reprehenderit.
        </div>
        <div>Aut explicabo nostrum omnis, perferendis soluta temporibus? Asperiores atque aut consectetur cumque dicta
            esse, explicabo fuga iusto laborum magnam modi nesciunt odio porro praesentium quibusdam quidem, sint sit,
            veritatis! Accusamus!
        </div>
        <div>Accusamus amet blanditiis cumque dicta dolorum et expedita explicabo in minima minus nesciunt nobis, nulla
            odio officiis optio porro praesentium quisquam repellat saepe sunt suscipit tempore veniam vitae voluptate
            voluptatibus.
        </div>
        <div>Asperiores, doloribus possimus? Animi deleniti labore obcaecati! Deserunt ea eveniet, harum ipsum iusto
            libero maiores minima nulla quasi quis reiciendis sit, tempore totam? Cum, deserunt eos magni nihil sed
            vero.
        </div>
        <div>A aut, cum doloribus enim illo, ipsam ipsum iste iusto laudantium maiores non porro provident quas quasi
            reiciendis saepe sed ullam vero. Atque dolores doloribus ducimus eaque hic quibusdam vero.
        </div>
        <div>Dolorem dolorum harum officiis sunt voluptatibus. Ab corporis dicta distinctio esse ex fugit impedit
            incidunt ipsa iusto laboriosam neque odio perspiciatis porro quasi, quibusdam quod reprehenderit tempore
            totam veniam veritatis!
        </div>
        <div>Ea illo natus quo reiciendis soluta sunt veniam! Accusamus aliquam autem consectetur deleniti doloremque
            ducimus ea est harum in iste molestias nostrum placeat possimus reprehenderit rerum, suscipit, temporibus
            voluptatem? Ratione?
        </div>
        <div>Alias consequatur incidunt laborum libero optio quis, rem? Amet aperiam autem blanditiis consectetur
            doloremque illum inventore labore omnis perspiciatis possimus provident quae quidem, quos repellat ullam.
            Animi consectetur itaque omnis!
        </div>
        <div>A atque, blanditiis corporis esse exercitationem fugiat iste iure magni maxime molestiae mollitia quia quo
            ratione rerum saepe sed soluta tempora totam veritatis voluptatum. Blanditiis doloremque inventore laborum
            maxime nemo.
        </div>
        <div>Ab commodi dignissimos ea et labore molestiae molestias possimus praesentium similique vero. Aspernatur,
            autem commodi earum eos error illo labore minima nam nobis optio quibusdam quod repellendus, sed sunt,
            temporibus!
        </div>
        <div>Alias aut consequuntur earum eius, eos facilis harum ipsam labore libero minus neque nobis possimus quam
            quibusdam, quisquam ratione repellat, similique vel voluptas voluptatum. Maxime, molestias, sed. Autem, est
            facere?
        </div>
        <div>Deserunt est ex inventore rerum! Ab accusamus atque beatae doloribus ea eius, illo illum impedit ipsam
            nemo, neque quas quibusdam, quisquam reiciendis sint sit tempore veritatis voluptas voluptate voluptates
            voluptatum.
        </div>
        <div>Accusamus aperiam architecto atque, cumque debitis dolorem dolorum earum eius excepturi itaque laboriosam
            laudantium libero magnam nam nostrum porro praesentium quae quas quidem recusandae repellendus unde, vel
            velit vitae, voluptate!
        </div>
        <div>Commodi error inventore nostrum quam quod repudiandae sint tempore vero! Alias architecto, beatae
            blanditiis culpa, cum cumque cupiditate distinctio eligendi excepturi fuga fugiat fugit nostrum pariatur
            quas, sequi similique soluta?
        </div>
        <div>Atque natus nemo nesciunt recusandae tempore. Expedita ipsa quisquam suscipit ut. Ab consequatur expedita
            hic impedit iste iusto molestiae nisi numquam quae quasi quidem reprehenderit similique tempora temporibus,
            velit voluptas.
        </div>
        <div>A adipisci animi deserunt dolores harum illum maxime minima mollitia necessitatibus obcaecati officiis
            quaerat, ratione, repellat ut vel. Ab deserunt dolore eius illum inventore ipsum minima molestias quidem
            reiciendis vel.
        </div>
        <div>Aliquid at consectetur cum error eum eveniet id impedit inventore, iure laborum natus, pariatur placeat
            possimus provident recusandae repudiandae velit? Accusamus dignissimos eligendi est facilis ipsa qui
            repellat repudiandae voluptates!
        </div>
        <div>Accusantium at autem dolore dolores facere, impedit in incidunt itaque maiores optio quasi quibusdam
            recusandae rerum similique sunt totam ut vitae voluptas! Aliquid eos placeat ratione. Ea iste repellat
            reprehenderit?
        </div>
        <div>Atque, culpa distinctio iusto modi molestias natus nisi perferendis placeat quae quod, totam unde,
            voluptas? Assumenda deserunt ea, magni maxime nam natus nihil perspiciatis. Enim eum ipsam minus officia
            rem.
        </div>
        <div>Ad cupiditate distinctio dolor dolore dolorum enim error inventore ipsum laborum minima nam neque nisi
            quaerat repellendus reprehenderit sit, tempora unde. Distinctio error harum laboriosam quas sapiente sint
            tenetur vero?
        </div>
        <div>A amet at commodi dolorem eius eligendi enim fugiat inventore iste magnam molestiae mollitia natus nostrum
            nulla optio, placeat quis saepe sint soluta temporibus vero vitae voluptatem voluptates. Eos, inventore?
        </div>
        <div>Ab facilis iusto laborum magni natus quis ratione sunt tempore ut voluptas. Corporis distinctio dolorum
            error facere iusto libero necessitatibus, nemo nostrum repellat, sit temporibus velit. Iusto laborum rerum
            voluptates!
        </div>
        <div>Ad adipisci cupiditate earum excepturi explicabo minima minus perspiciatis quisquam recusandae, vitae!
            Delectus doloremque perspiciatis voluptas. Accusantium debitis distinctio, dolor doloribus, exercitationem
            iure labore minima neque perferendis reiciendis reprehenderit sint.
        </div>
        <div>Amet architecto culpa dolorem est, fugiat, incidunt, magni molestias perferendis porro quo similique vero
            vitae voluptatibus? Assumenda beatae corporis cum, debitis deleniti fugit ipsam modi molestias optio
            praesentium quos reprehenderit.
        </div>
        <div>Ab aperiam dignissimos earum, eligendi iste natus quam sint. A cupiditate, dolores ducimus hic id nostrum
            quis ullam. Aperiam atque aut dolore dolorum eligendi illum iusto provident quidem quo quos!
        </div>
        <div>Accusantium animi blanditiis consequuntur eaque eligendi fuga illo iure labore, molestias nisi nostrum odio
            officia praesentium provident quas qui quibusdam quis repellat rerum soluta temporibus ullam voluptatibus
            voluptatum! Ut, voluptatem.
        </div>
        <div>Id odit quidem soluta. Distinctio est excepturi labore laudantium minima similique vero. Asperiores commodi
            deleniti doloremque enim expedita magni maxime minima, minus nulla placeat possimus quasi, repellendus,
            saepe tempore veritatis.
        </div>
        <div>Animi dolorum libero non, obcaecati officia pariatur quam ratione tempore unde vel. A dolores et incidunt
            magni numquam sit voluptas. Aperiam doloremque facilis nihil non, obcaecati perspiciatis quaerat tempore
            velit!
        </div>
        <div>Assumenda commodi cupiditate eligendi est eum libero modi nostrum quae ullam, voluptas! Alias animi culpa
            ex illum ipsa ipsum, magnam, maxime molestiae porro, ratione saepe unde ut? Debitis dignissimos, saepe?
        </div>
        <div>Ab accusamus dolorum iusto laborum quaerat unde vitae! Ad consequatur deleniti distinctio ducimus eligendi
            eveniet facere necessitatibus optio qui quidem quisquam recusandae repellat rerum similique sit unde vero
            voluptate, voluptatum.
        </div>
    </div>
    <script>
        /*resize 重置大小 scroll 滚动窗口*/
        window.addEventListener('resize',function (){
            alert('窗口大小改变了！')
        })
        window.addEventListener('scroll',function (){
            alert('窗口被滚动了！')
        })
        /*mouseover  鼠标移入事件*/
        let h4E = document.querySelector('h4');
        window.addEventListener('mouseover',function (){
            console.log('标题被查看了！')
        })
        /*window对象是浏览器内置的全局对象，代表了当前浏览器窗口*/
        /*click鼠标点击事件*/
        let btnE = document.getElementById('btn');
        btnE.addEventListener('click',function (){
            alert('点击了！2')
        })
    </script>
</body>
</html>